<template>
  <div id="riskPersonDom">
    <div id="videoList">
      <el-table
        :data="riskPersonListArr"
        stripe
        height="100%"
        style="width: 100%"
      >
        <el-table-column prop="userName" label="姓名" width="180" />
        <el-table-column prop="userTelephone" label="电话" width="180" />
        <el-table-column prop="riskCause" label="风险原因" width="180" />
        <el-table-column prop="" label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pageDom">
      <el-pagination
        background
        layout="total,sizes,prev, pager, next"
        :current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import axios from "@/utils/axios";
import { ref, reactive, onMounted, onUnmounted, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits(["jumpPage"]);

const router = useRouter();

const pageSize = ref(10); // 每页条数
const total = ref(0); // 总条数
const riskPersonListArr = reactive([]);
const currentPage = ref(1);
// 跳页
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getVideoListData(currentPage.value);
};
// 更改每页显示的数量
const handleSizeChange = (pageSize) => {
  pageSize.value = pageSize;
  getVideoListData(currentPage.value);
};

const getVideoListData = (pageNum) => {
  var pageNum = pageNum || 1;
  axios
    .post("api/taxRisk/selectList", {
      pageNum: pageNum, //页数
      pageSize: pageSize.value, //页面显示数量
    })
    .then((res) => {
      if (res.status == 200) {
        total.value = res.data.total; // 总页数
        riskPersonListArr.splice(0);
        res.data.list.forEach((element) => {
          riskPersonListArr.push(element);
        });
        currentPage.value = res.data.pageNum;
        pageSize.value = res.data.pageSize;
      }
    })
    .catch((res) => {});
};

const isLoginTime = ref();
const isLogin = () => {
  if (sessionStorage.time) {
    var nowDate = new Date().getTime();
    if (Number(nowDate) - Number(sessionStorage.time) > 2 * 60 * 60 * 1000) {
      ElMessageBox.alert("登录过期", "提示", {
        confirmButtonText: "重新登陆",
        callback: (action) => {
          router.push({
            name: "login",
          });
        },
      });
    } else {
      // console.log("检验成功，没有超时")
      isLoginTime.value = setTimeout(() => {
        isLogin();
      }, 60 * 1000);
    }
  } else {
    clearTimeout(isLoginTime.value);
    ElMessageBox.alert("请重新登录", "提示", {
      confirmButtonText: "重新登陆",
      callback: (action) => {
        router.push({
          name: "login",
        });
      },
    });
  }
};

const updataStatusAjax = (item, status) => {
  var str = status == 2 ? "通过" : "未通过";
  axios
    .post("api/taxVideo/updateTaxAudit", {
      videoId: item.videoId, // id
      status: status, //（2：通过 3：拒绝）
      riskStatus: status == 3 ? "" : Number(agreeRisk.value),
    })
    .then((res) => {
      // console.log(res);
      if (res.status == 200) {
        ElMessage({
          message: "视频" + str,
          type: "success",
        });
        if (status == 2) {
          dialogVisible.value = false;
          agreeRisk.value = "";
        }
        getVideoListData(currentPage.value);
      }
    })
    .catch((res) => {});
};
// 审核一个视频
let agreeItem = "";
const updataStatus = (item, status) => {
  var str = status == 2 ? "通过" : "未通过";
  if (status == 2) {
    agreeItem = item;
    dialogVisible.value = true;
  } else {
    ElMessageBox.confirm("此视频确认" + str + "吗？", "确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(111111)
        updataStatusAjax(item, status);
      })
      .catch(() => {});
  }
};
// 点击确定
const dialogSub = () => {
  if (agreeRisk.value == "") {
    ElMessage({
      message: "请选择风险状态",
      type: "warning",
    });
  } else {
    updataStatusAjax(agreeItem, 2);
  }
};

onMounted(() => {
  isLogin();
  getVideoListData();
  delete sessionStorage.date;
});
onUnmounted(() => {
  clearTimeout(isLoginTime.value);
});
// 点击查看
const handleEdit = (i, data) => {
  sessionStorage.riskDate = data.videoDate;
  sessionStorage.userName = data.userName;
  sessionStorage.riskStatus = data.riskStatus;
  emit("jumpPage"); // 提交到主页
};
</script>
<style lang="scss" scoped>
#riskPersonDom {
  height: 100%;
}

#filterDom {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .status,
  .search {
    margin-left: 12px;
  }
  .name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 256px;
    margin-right: 12px;
    .el-input {
      width: 220px;
    }
  }
}

#videoList {
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 20px;
  ul {
    overflow: hidden;
    zoom: 1;
  }
  li {
    width: 20%;
    float: left;
    height: 374px;
    margin-bottom: 5px;
  }

  .videoSelf {
    height: 300px;
  }

  .che {
    line-height: 32px;
  }
}

#pageDom {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogDiv {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>
